<%@ page import="dao.impl.WarehouseImpl" %>
<%@ page import="po.Warehouse" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <link rel="stylesheet" href="resources/css/amazeui.min.css"/>
    <link rel="stylesheet" href="resources/css/admin.css"/>
    <script src="resources/js/echarts.js"></script>

</head>
<%
    String warehousename = request.getParameter("warehousename");
    WarehouseImpl warehouseDao = new WarehouseImpl();
    StringBuilder sql = new StringBuilder("select * from warehouse where 1 = 1 ");
    /*
    if (warehousename != null) {//查询时用
        sql.append(" and warehouse_name =");
        sql.append("'").append(warehousename).append("'");
    }*/
    List<Warehouse> warehouses = warehouseDao.selectWarehouse(String.valueOf(sql));
    List<String> warehousesID = warehouseDao.selectWarehouseId();
%>
<body>
<!--<div class="layuimini-container">-->
<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">仓库物品可视化</strong><small></small></div>
    </div>
    <hr>

    <div class="am-g">
        <div class="am-u-sm-12">
            <div id="main" style="width: 90%;height: 400px;"></div>
            <script type="text/javascript">

                /**
                 * 报表功能
                 */
                var echartsRecords = echarts.init(document.getElementById('main'), 'walden');

                var optionRecords = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: [
                            <%
                            for (String ID : warehousesID) {
                            %>'ID',
                            <%}%>]
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            //boundaryGap: false,
                            data: [
                                <%
                                for (String ID : warehousesID) {
                                %>'<%=ID%>号仓库',
                                <%}%>]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'slider',
                            // 是否显示滑块
                            show: true,
                            // 当前数据窗口外的数据，被 设置为空
                            //filterMode: 'empty',
                            // 滑块的宽高
                            width: '80%',
                            height: 15,
                            // 滚动条內空白显示
                            //showDataShadow: false,
                            // 滑块的位置
                            left: '10%',
                            // 起始位置 类目轴表示下标
                            startValue: 0,
                            // 结束位置
                            endValue: 2,
                            // 锁定选择区域的大小  最多显示10个类目
                            zoomLock: true,

                            bottom: 'auto',
                            xAxisIndex: [0]
                        }
                    ],
                    series: [
                        <%
                        for (Warehouse wh : warehouses) {
                        %>
                        {
                            name: '<%=wh.getGoodName() %>',
                            type: 'bar',
                            barWidth: 30,
                            stack: '<%=wh.getType() %>',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [<%
                            for (String ID : warehousesID) {
                                if (wh.getWarehouseId().equals(ID)){
                                %>
                                <%=wh.getCount() %>,
                                <%}else{%>
                                ,
                                <%}}%>
                            ]
                        },
                        <%}%>
                    ]
                };
                echartsRecords.setOption(optionRecords, true);

                // echarts 窗口缩放自适应
                window.onresize = function () {
                    echartsRecords.resize();
                }
            </script>
        </div>
    </div>
</div>
</body>
</html>

